<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table {
            width: 600px;
            cursor: pointer;
        }

        table td {
            text-align: center;
        }

        table th {
            background-color: blueviolet;
        }

        table tr {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="dv">
        请输入姓名:
        <input type="text" value="" id="uname" />
        <br /> 请输入邮箱:
        <input type="text" value="" id="email" />
    </div>

    <input type="button" value="添加" id="btn" />
    <table border="1" cellpadding="0" cellspacing="0" id="tb">
        <thead>
            <tr>
                <th>姓名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody id="tbd">
            <tr>
                <td>小黑</td>
                <td>xiaohei@126.com</td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            let uname = document.querySelector('#uname');
            let email = document.querySelector('#email');
            let btn = document.querySelector('#btn');
            let tbd = document.querySelector('#tbd');
            var regChinese = /^[\u4E00-\u9FA5]{2,4}$/;
            var regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
            btn.addEventListener('click', function () {
                let name = uname.value;
                let mail = email.value;
                console.log(regChinese.test(name.trim()));
                console.log(regEmail.test(mail.trim()));
                if (regChinese.test(name.trim()) && regEmail.test(mail.trim())) {
                    let tr = document.createElement('tr');
                    tr.innerHTML = `
                    <td>${name}</td>
                    <td>${mail}</td>
                    `;
                    // console.log(tr);
                    tbd.append(tr);
                }
                else {
                    alert('请输入正确的内容');
                }
            })
        }
    </script>
</body>

</html>